<template>

  <view>
    <!-- 公共组件-每个页面必须引入 -->
    <public-module></public-module>
	
  
  <view v-if="loadstatus==false">
  		<!--<view v-if="item.cover">
  			<img :src="item.cover" mode="widthFix" style="width: 100%;">
  		</view> -->
  		<!--usercard :cardinfo="item.userCardInfo"></usercard-->
  		<view class="htitle u-padding-10 u-line-1">
  			<text v-if="item.category_names!=null&&item.category_names!=''">【{{ item.category_names }}】</text>
  			<text class="float_right u-p-r-20" v-if="item.distance!=null">距离:{{item.distance}}</text>
  		</view>
		<view class="b-b"></view>
  		<view class="u-padding-20" v-if="item.title!=''&&item.title!=null">
  			<u--text :text="item.title" align="left" bold size="17"></u--text>
  		</view>
		<view class="u-m-t-20 u-m-l-20 u-m-r-20" v-if="item.member_id>0" style="border: #e9e9e9 dotted 1px; border-radius: 8px;">
					<u-row customStyle="width:100%">
						<u-col span="2">
							<u-avatar :src="item.usercard.avatar_url" shape="square" size="50"></u-avatar>
						</u-col>
						<u-col span="8">
							<view class="">
								<view class="nickName">{{item.usercard.showname}}</view>
								<view class="detail">{{item.usercard.group_names}}</view>
							</view>
						</u-col>
					</u-row> 
		</view>
  		<view class="u-padding-20 u-content-color">
			<u--image width="100%" mode="aspectFill" v-if="cover!=''" :src="cover" @click="preview(cover)"
			showError><view slot="error" style="font-size: 20rpx;">Image lost</view>
			</u--image>
  			<u-parse :content="item.content" :selectable="true" :tagStyle="style"></u-parse>
  		<view v-for="(img, index) in slide" :key="index" v-if="slide.length>0">
  			<u-gap height="8"></u-gap>
  			<u--image width="100%" mode="aspectFill" :src="img.file_url" @click="preview(img.file_url)"
			showError><view slot="error" style="font-size: 20rpx;">Image lost</view>
			</u--image>
  		</view>
  		</view>
  		<view class="u-padding-20 u-type-info u-font-sm u-flex u-flex-between">
  				<view>{{ item.hits }}人次浏览、 {{ item.update_time }} 更新</view>
				<view class="float_right" v-if="item.member_id==userInfo.member_id" @click="$tools.goJump('pagesPackageA/info/fabu',{content_id:item.content_id},'','')">[修改]</view>
  		</view>
  		
  		<u-gap height="8" bg-color="#f3f4f6"></u-gap>
  
    
      <ygcComment
        ref="ygcComment"
        :placeholder="'高楼平地起，评论全靠您~'"
		 labelPosition="bottom"
		:commenttitle="'讨论回复'"
        :root_id="item.content_id"
        :module="module"
      ></ygcComment>
	  
  </view>
  
  <view class="u-margin-20" v-else>
	  <u-gap height="10"></u-gap>
	  <u-skeleton :loading="loadstatus" :animate="true" rows="10" avatar></u-skeleton>
  </view>
  </view>
  
</template>


<script>
import { mapState, mapMutations } from "vuex";
import ygcComment from "@/components/ygc-comment/ygc-comment.vue";
import { api_content_info,api_accord_info } from '@/config/api.js';
import store from '@/store';
export default {
	components: {
	  ygcComment
	},
  data() {
    return {
      item: {
		  category_name:'Loading',
		  update_time:0,
		  hits:0,
		  distance:0,
	  },
	  slide:[],
      loadStatus: "loadmore",
      loadstatus: true,
      loadstxt: "loading...",
	  id:'',
	  cover:'',
	  module:'content',
	  style: {
	  		p: 'font-size:32rpx;margin:20rpx auto;padding:0px;',
	  		span: 'font-size: 30rpx'
	  	},
    };
  },
  computed: {
    ...mapState(["userInfo","locAtion"]),
  },
  onLoad(options) {
    this.id = options.id;

    this.getpagecontrac();
  },

  methods: {
   preview(current){
	 let prewimg=this.item.images.map(item =>(item.file_url))
	 uni.previewImage({
	        urls: prewimg,
	        current: current
	    });
   },
    getpagecontrac() {
		this.loadstatus = true;
		api_content_info({
				content_id:this.id,
				location:JSON.stringify(this.locAtion)
			}).then((res) => {
				console.log(res)
					this.item=res
					let imglist = this.item.images;
					if (imglist && imglist.length > 0) {
						this.cover = imglist[0].file_url;
						this.slide = imglist.slice(1).map(item => item);
					}
				this.loadstatus = false;
			  }).catch((e) => {});
    },
  },
};
</script>
<style lang="scss" scoped>
	.u-content-color{
		line-height: 200%;
	}

</style>
